<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>借助 JS 实现 Rem 弹性布局</title>
  <style type="text/stylesheet">
    /*
     * (4) 为 body 设置不同的字体大小
     * (5) 为 rem 设置具体的尺寸
     */
    @media screen and (min-width: 320px) {
      html { font-size: 32px; }
	  body { font-size: 16px; }
    }
    @media screen and (min-width: 481px) and (max-width:640px) {
      html { font-size: 48px; }
      body { font-size: 18px; }
    }
    @media screen and (min-width: 641px) {
      html { font-size: 64px; }
	    body { font-size: 20px; }
    }

    body {
      /* (2) 修正字体的大小 */
      font-size: 16px;
      /* (3) 设置 body 最大的宽度，并居中 */
      width: 10rem;
      margin: auto;
    }
  </style>
</head>
<body>
  <!-- (5) 提示开启 js -->
  <noscript>Open javascript, for better experience!</noscript>

  <script>
    /**
     * 标准的借助 JS 实现的 Rem 弹性布局如下所示，但需要解决一下问题：
     * (1) 浏览器支持最小字体大小为 12px -- 通过增大 rem 所占的比例，即为 1/10
     * (2) 根元素字体对全局字体大小的影响 -- 通过设置 body 字体尺寸来修正
     * (3) PC 页面过宽 -- 通过设置 body 的最大宽度，并将 body 居中
     * (4) 字体缩放的问题 -- 通过媒体查询为 body 设置不同的字体大小，并在具体元素上使用 em 相对尺寸
     * (5) js 被禁止 -- 通过 <noscript> 提示开启 js, 并通过媒体查询，给 rem 设置具体的尺寸
     */
    function correctHtmlFontSize() {
      let clientWidth = document.documentElement.clientWidth;
      /* (3) 设置 body 的最大宽度 */
      clientWidth = clientWidth > 780 ? 780 : clientWidth;
      /* (1) 增大 rem 所占的比例，为 1/10 */
      document.documentElement.style.fontSize = clientWidth / 10 + 'px';
    }
    document.addEventListener('DOMContentLoaded', correctHtmlFontSize);
    window.addEventListener('orientationchange'in window ? 'orientationchange' : 'resize', correctHtmlFontSize);
  </script>
</body>
</html>
